<template>
  <div class="card-box">
      <h1>自定义展示列 冻结列定义 每条数据占用方案（换行，隐藏） 定制表格</h1>
      <DraggableTable :Col="dropCol" :roleList="roleList" :setColumnWidth="true" :showSummary="true" :showOperation="true">
          <!-- 定义了一个名为 row 的变量来接收子组件传递过来的当前行的数据 -->
          <template #operation="{ row }">
              <!-- 这里放入你想要显示的操作按钮 -->
              <el-button link type="primary"   icon="Edit" @click="handleUpdate(row)" >修改</el-button>
          </template>
      </DraggableTable>
      <h1>普通的表格</h1>
       <div class="tablecss">
            <el-table :data="tableData" style="width: 100%" flexible stripe :header-cell-style="{ background: '#F7F9FA !important', color: '#333' }">
            <el-table-column type="index" label="序号" width="75">
            </el-table-column>
            <el-table-column label="名称" show-overflow-tooltip min-width="100">
              <template #default="scope">{{ scope.row.name || "--" }}</template>
            </el-table-column>
            <el-table-column label="xxx" show-overflow-tooltip min-width="150">
              <template #default="scope">{{ scope.row.address || "--" }}</template>
            </el-table-column>
            <el-table-column label="日期" show-overflow-tooltip min-width="120">
              <template #default="scope">{{ scope.row.date || "--" }}</template>
            </el-table-column>
            <el-table-column fixed="right" label="操作" min-width="130">
              <template #default="scope">
                <div class="public-table-btn">
                  <span @click="detailBtn(scope.row)">详情</span>
                </div>
              </template>
            </el-table-column>
            <template #empty>
              <el-empty description="暂无数据" />
            </template>
          </el-table>
      <h1>封装的表格</h1>
          <TableComponent v-bind="tableConfig">
            <template #nameHeader>
            <div>姓名</div>
            </template>
            <template #name>
            <div>Yana</div>
            </template>
        </TableComponent>
    </div>
  </div>
</template>


<script setup>
import { ref ,reactive} from 'vue'
import DraggableTable from '@/components/Table/table.vue'
import TableComponent from '@/components/CyTable/cytable.vue'

const tableConfig = {
  api: 'getTableData',
  columns: [
    {
      prop: 'date',
      label: 'Date',
    //   tooltip: 'This is Date'
    },
    {
      prop: 'name',
      label: 'Name'
    },
    {
      prop: 'state',
      label: 'State'
    },
    {
      prop: 'city',
      label: 'City'
    },
    {
      prop: 'address',
      label: 'Address'
    },
    {
      prop: 'zip',
      label: 'Zip',
    //   style: 'color: red',
    //   labelStyle: 'color: red',
       sortable: true
    }
  ],
  operation: {
    columns: [
      {
        text: '编辑',
        click: () => {},
        // visible: (row) => row.date === '2016-05-07'
      }
    ]
  },
  rowKey: 'date',
//   selectable: (row) => row.date === '2016-05-07',
  footer: {
    operations: [
      {
        text: '删除',
        click: () => {}
      }
    ]
  }
}


const tableData = reactive([
{
    date: '2016-05-03',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles',
  },
  {
    date: '2016-05-02',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles',
  },
  {
    date: '2016-05-04',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles',
  },
  {
    date: '2016-05-01',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles',
  },
])
const  detailBtn =(row)=>{
    console.log(row);
}

const roleList = ref([
{ partName: 1, batchNo: 2, invoiceNo: 3, orderNo: 4, boxNo: 5, caseNo: 6, caseNo1: 7, caseNo2: 8, caseNo3: 9, caseNo4: 10, caseNo5: 10 },
{ partName: 2, batchNo: 2, invoiceNo:2, orderNo: 2, boxNo: 2, caseNo: 2, caseNo1: 2, caseNo2: 2, caseNo3: 2, caseNo4: 2, caseNo5: 2},
{ partName: 'xxxxxxxxxxxxxxxxx', batchNo: 'sssssssssss', invoiceNo: 'uuuuuuuuuuuuuuuuuuuuuuuuuuuu', orderNo: '55555555555555555555', boxNo: 1232131231, caseNo: 'mnnnnnnnnnnnnnnnnnnnnnnnn', caseNo1: 7, caseNo2: 8, caseNo3: 9, caseNo4: 10, caseNo5: 10 },
{ partName: 2, batchNo: 2, invoiceNo:2, orderNo: 2, boxNo: 2, caseNo: 2, caseNo1: 2, caseNo2: 2, caseNo3: 2, caseNo4: 2, caseNo5: 2},
]);

const dropCol = ref([
  { label: '零件名称', prop: 'partName', status: true ,frozen: true ,  },
  { label: '批次号', prop: 'batchNo', status: true,frozen: true ,  },
  { label: '发票号', prop: 'invoiceNo', status: true,frozen: true ,  },
  { label: '订单号', prop: 'orderNo', status: true,frozen: true ,  },
  { label: '箱号', prop: 'boxNo', status: true,frozen: true ,  },
  { label: '小箱号', prop: 'caseNo', status: true,frozen: true ,  },
  { label: '小箱号1', prop: 'caseNo1', status: true,frozen: true ,  },
  { label: '小箱号2', prop: 'caseNo2', status: true,frozen: true ,  },
  { label: '小箱号3', prop: 'caseNo3', status: true,frozen: true ,  },
  { label: '小箱号4', prop: 'caseNo4', status: true,frozen: true ,  },
  { label: '小箱号5', prop: 'caseNo5', status: true,frozen: true ,  },

]);

const  handleUpdate =(row)=>{
  console.log(row,'123');
}

</script>

<style lang="scss" scoped>

.tablecss{
    display: flex;
  flex-direction: column;
  flex: 1;
}
.public-table-btn {
  width: 100%;
  display: flex;
  align-items: center;
  /* justify-content: space-between; */
}
.public-table-btn span {
  color: #0052d9;
  font-size: 14px;
  cursor: pointer;
  margin-right: 24px;
  white-space: nowrap;
}
</style>
